<template>
  <div class="hello">
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"><img :src="logo" alt=""></div></el-col>
      <el-col :span="16">
          <ul>
            <li><router-link to="home">首页</router-link></li>
            <li><router-link to="product">产品</router-link></li>
            <li><router-link to="price">价格</router-link></li>
            <li><router-link to="service">服务</router-link></li>
            <li><router-link to="we">我们</router-link></li>
            <li><el-button type="primary" v-on:click="login">登录</el-button></li>

          </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import logo from '@/assets/Logo.png'
  import home from '@/page/home'
  import price from '@/page/price'
  export default {
    name: 'headTop',
    data () {
      return {
        logo:logo
      }
    },
    components:{
      home,
      price
    },
    methods: {
      login: function () {
        this.counter += 1
        this.$emit('increment')
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .bg-purple img {
    width:150px;
    margin-top:10px;
  }
 a{
   color: #000;
   text-decoration: none;
 }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
  }
  ul li a:hover{
    color: #00CAE7;
  }

</style>
